<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			html,
			body{
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			.wrap{
				width: 100%;
				height: 100%;
			}
			.wrap > .left{
				/* float: left; */
				position: absolute;
				left: 0px;
				width: 17.34375%;
				height: 100%;
				background-color: rgb(255, 255, 255);
				box-shadow: 60px 0px 60px rgba(241, 241, 248, 0.5);
				z-index: 1;
			}
			.wrap > .right{
				/* float: left; */
				position: absolute;
				right: 0px;
				width: 82.65625%;
				height: 100%;
				background-color: deeppink;
			}
			.wrap > .right > .top{
				display: block;
				width: 100%;
				height: 7.40740741%;
				background-color: rgb(252, 253, 253);
			}
			.wrap > .right > .bottom{
				display: block;
				width: 100%;
				height: 92.5925926%;
				background-color: rgb(249, 249, 249);
			}
			.wrap > .left > a{
				display: block;
				width: 50.4504505%;
				height: 6.38888888%;
				margin-top: 14.7147147%;
				margin-left: 18.9189189%;
				background-image: url(images/logo.png);
				background-size: 100% 100%;
			}
			.wrap > .left > div{
				width: 50.4504505%;
				height: 6.38888888%;
				margin-left: 18.9189189%;
				margin-top: 40%;
				/* background-image: url(images/icon1.png); */
				background-size: auto 75%;
				background-repeat: no-repeat;
				background-position: 0 50%;
				box-sizing: border-box;
			}
			.wrap > .left > div:nth-child(2){
				background-image: url(images/icon1.png);
			}
			.wrap > .left > div:nth-child(3){
				background-image: url(images/icon2.png);
			}
			.wrap > .left > div:nth-child(4){
				background-image: url(images/icon3.png);
			}
			.wrap > .left > div:nth-child(5){
				background-image: url(images/icon4.png);
			}
			.wrap > .left > div > a{
				width: 100%;
				height: 100%;
				margin-left: 3.5vw;
				text-decoration: none;
				font: 1.2vw/3.5vw "冬青黑体";
				color: rgb(120, 117, 117);
			}
			.wrap > .left > div > a:hover{
				color: rgb(198, 193, 193);
			}
			.wrap > .right > .top > span,
			.wrap > .right > .top > div > span{
				margin: 1.57529931% 0;
				margin-left: 5.2299937%;
				font: 1.5vw/3.5vw "冬青黑体";
				color: rgb(120, 117, 117);
			}
			.wrap > .right > .top > div{
				position: absolute;
				right: 0px;
				top: 0px;
				width: 18.9035917%;
				height: 7.40740741%;
			}
			.wrap > .right > .top > div > a{
				
				display: block;
				width: 25%;
				height: 100%;
				background-repeat: no-repeat;
				background-size: 70% 70%;
				background-position: 50% 50%;
			}
			.wrap > .right > .top > div > a:nth-child(1){
				float: left;
				background-image: url(images/icon-mail.png);
			}
			.wrap > .right > .top > div > span:nth-child(2){
				float: left;
				margin-left: 11%;
				padding-left: 14.3333333%;
				border-left: 2px solid rgb(234, 235, 235);
			}
			.wrap > .right > .top > div > a:nth-child(3){
				float: right;
				background-image: url(images/icon-user.png);
			}
			/* .wrap > .right > .bottom{
				overflow: auto;
			} */
			.wrap > .right > .bottom > img{
				position: relative;
				z-index: 2;
				margin-top: 1%;
				width: 98%;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="left">
				<a href="#"></a>
				<div>
					<a href="javascript:;">
						控制台
					</a>
				</div>
				<div>
					<a href="javascript:;">
						案例管理
					</a>
				</div>
				<div>
					<a href="javascript:;">
						我的项目
					</a>
				</div>
				<div>
					<a href="javascript:;">
						资金管理
					</a>
				</div>
			</div>
			<div class="right">
				<div class="top">
					<span>欢迎你来到有鱼设集！</span>
					<div>
						<a href="javascript:;"></a>
						<span>dairy</span>
						<a href="javascript:;"></a>
					</div>
				</div>
				<div class="bottom">
					<img src="images/welcome.jpg" alt="欢迎图片" />
					<div>
						
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
